<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>启动页</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            width: 100%;
            height: 100%;
            position: relative;
        }
        /* button {
            width: 13.4rem;
            padding: 0.6rem 0;
            background: #cf002d;
            border: none;
            border-radius: 13px;
            position: absolute;
            left: 50%;
            margin-left: -6.7rem;
            top: 50%;
            margin-top: 7rem;
            color: #fff;
            font-size: 1rem;
        } */
    </style>
</head>

<body>
    <div class="box" style="background-image: url('./img/2.jpg')">
        <!-- <button onclick="clickBtn();">去APP Store下载</button> -->
    </div>

    <script src="./js/zepto.js"></script>
    <script>
        function judgeSize(w1, h1, w2, h2, conW, conH) {
            var radio1 = w1 / h1;
            var radio2 = w2 / h2;
            var realW, realH;
            var radio;
            if (radio1 < radio2) {
                radio = w1 / w2;
                realH = conH / radio;
                if (realH < h2) {
                    return 'hT';
                } else {
                    return 'hF';
                };
            } else if (radio1 > radio2) {
                radio = h1 / h2;
                realW = conW / radio;
                if (realW < w2) {
                    return 'wT';
                } else {
                    return 'wF';
                }
            } else {
                radio = 1;
                return 'w&hT'
            }
        }
        //页面初始化时判断是否需要滚动条  
        function judgeScroll() {
            var winW = document.documentElement.clientWidth;
            var winH = document.documentElement.clientHeight;
            document.documentElement.style.fontSize = winW / 1875 * 100 + "px";
            var size = parseInt(document.documentElement.style.fontSize);

            if (size < 12) {
                $('body').css({
                    'width': '18.75rem',
                    'height': '30rem',
                    'minHeight': winH,
                    'minWidth': winW
                });
                return
            };
            var str = judgeSize(1875, 3014, winW, winH, 1440, 2170);
            if (str == 'hF') {

                $('body').css({
                    'width': winW,
                    'height': '30rem'
                });
            } else if (str == 'hT' || str == 'wT' || str == 'w&hT') {

                $('body').css({
                    'width': winW,
                    'height': winH
                });
            } else if (str == 'wF') {

                $('body').css({
                    'width': '18.75rem',
                    'height': winH
                });
            };
        }
        judgeScroll();
    </script>
</body>

</html>